<!--
 *                                |~~~~~~~|
 *                                |       |
 *                                |       |
 *                                |       |
 *                                |       |
 *                                |       |
 *     |~.\\\_\~~~~~~~~~~~~~~xx~~~         ~~~~~~~~~~~~~~~~~~~~~/_//;~|
 *     |  \  o \_         ,XXXXX),                         _..-~ o /  |
 *     |    ~~\  ~-.     XXXXX`)))),                 _.--~~   .-~~~   |
 *      ~~~~~~~`\   ~\~~~XXX' _/ ';))     |~~~~~~..-~     _.-~ ~~~~~~~
 *               `\   ~~--`_\~\, ;;;\)__.---.~~~      _.-~
 *                 ~-.       `:;;/;; \          _..-~~
 *                    ~-._      `''        /-~-~
 *                        `\              /  /
 *                          |         ,   | |
 *                           |  '        /  |
 *                            \/;          |
 *                             ;;          |
 *                             `;   .       |
 *                             |~~~-----.....|
 *                            | \             \
 *                           | /\~~--...__    |
 *                           (|  `\       __-\|
 *                           ||    \_   /~    |
 *                           |)     \~-'      |
 *                            |      | \      '
 *                            |      |  \    :
 *                             \     |  |    |
 *                              |    )  (    )
 *                               \  /;  /\  |
 *                               |    |/   |
 *                               |    |   |
 *                                \  .'  ||
 *                                |  |  | |
 *                                (  | |  |
 *                                |   \ \ |
 *                                || o `.)|
 *                                |`\\) |
 *                                |       |
 *                                |       |
 *
 * @Descripttion:
 * @version:
 * @Date: 2022-03-02 14:06:55
 * @LastEditors: huzhushan@126.com
 * @LastEditTime: 2022-03-18 15:48:30
 * @Author: huzhushan@126.com
 * @HomePage: https://huzhushan.gitee.io/vue3-element-admin
 * @Github: https://github.com/huzhushan/vue3-element-admin
 * @Donate: https://huzhushan.gitee.io/vue3-element-admin/donate/
 -->

<template>
  <div class="app-container">
    <el-form ref="form" :model="model" :rules="rules" label-position="top">
      <el-row :gutter="20">
        <el-col :span="5">
          <el-form-item label="任务名称" prop="name">
            <el-input v-model="model.name" placeholder="任务名称"></el-input>
          </el-form-item>
          <el-form-item label="应用名称" prop="applicationId">
            <el-select
              v-model="model.applicationId"
              style="width: 100%"
              placeholder="应用名称"
            ></el-select>
          </el-form-item>
          <el-form-item label="消息通道" prop="channelId">
            <el-select
              v-model="model.channelId"
              style="width: 100%"
              placeholder="消息通道"
            ></el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10">
          <el-form-item label="发送给..." prop="numbers">
            <template #label>
              <span>发送给...</span>
              <el-button style="margin-left: 32px">
                <svg-icon icon-class="import"></svg-icon>
                从通讯录导入
              </el-button>
            </template>
            <el-input
              v-model="model.numbers"
              type="textarea"
              rows="6"
              placeholder="每行一个手机号，或以空格分开"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-select
              v-model="model.tags"
              style="width: 100%"
              prop="tags"
              multiple
              filterable
              allow-create
              default-first-option
              placeholder="标签"
            ></el-select>
          </el-form-item>
          <el-form-item>
            <el-checkbox v-model="isSendTask">预约发送</el-checkbox>
            <el-select
              v-if="isSendTask"
              v-model="model.sendTask.type"
              style="margin-left: 16px"
            >
              <el-option value="CRON" label="周期发送"></el-option>
              <el-option value="TIMING" label="定时发送"></el-option>
            </el-select>
          </el-form-item>

          <el-tabs
            v-if="isSendTask && model.sendTask.type === 'CRON'"
            v-model="tabName"
            type="card"
          >
            <el-tab-pane label="每周" name="week">
              <el-form-item prop="sendTask.weekValue">
                <el-checkbox-group
                  v-model="model.sendTask.weekValue"
                  prop="sendTask.weekValue"
                >
                  <el-checkbox label="1">周一</el-checkbox>
                  <el-checkbox label="2">周二</el-checkbox>
                  <el-checkbox label="3">周三</el-checkbox>
                  <el-checkbox label="4">周四</el-checkbox>
                  <el-checkbox label="5">周五</el-checkbox>
                  <el-checkbox label="6">周六</el-checkbox>
                  <el-checkbox label="7">周日</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-tab-pane>
            <el-tab-pane label="每月" name="month">
              <el-form-item prop="sendTask.monthValue">
                <el-checkbox-group
                  v-model="model.sendTask.monthValue"
                  prop="sendTask.monthValue"
                >
                  <el-checkbox
                    v-for="item in 31"
                    :key="item"
                    :label="item"
                    style="width: 48px"
                  >
                    {{ item }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
            </el-tab-pane>
          </el-tabs>

          <el-form-item
            v-if="isSendTask && model.sendTask.type === 'CRON'"
            label="日期范围"
            prop="sendTask.startEndDate"
          >
            <el-date-picker
              v-model="model.sendTask.startEndDate"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>
          <el-form-item v-if="isSendTask" label="发送时间" prop="sendTask.time">
            <el-date-picker
              v-if="model.sendTask.type === 'TIMING'"
              key="TIMING"
              v-model="model.sendTask.time"
              type="datetime"
              placeholder="发送时间"
            ></el-date-picker>
            <el-time-picker
              v-if="model.sendTask.type === 'CRON'"
              key="CRON"
              v-model="model.sendTask.time"
              placeholder="发送时间"
            ></el-time-picker>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="消息模板" prop="templateId">
            <el-select
              v-model="model.templateId"
              style="width: 100%"
              placeholder="消息模板"
            ></el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div class="submit">
      <el-button type="primary" @click="handleSubmit">提交</el-button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'GroupSend',
  data() {
    return {
      isSendTask: false,
      tabName: 'week',
      model: {
        name: '',
        templateId: '',
        applicationId: '',
        channelId: '',
        numbers: '',
        tags: '',
        sendTask: {
          type: 'TIMING',
          weekValue: [],
          monthValue: [],
          startEndDate: '',
          time: '',
        },
      },
      rules: {
        name: [
          {
            required: true,
            message: '请输入任务名称',
            trigger: 'blur',
          },
        ],
        applicationId: [
          {
            required: true,
            message: '请选择应用名称',
            trigger: 'change',
          },
        ],
        channelId: [
          {
            required: true,
            message: '请选择消息通道',
            trigger: 'change',
          },
        ],
        templateId: [
          {
            required: true,
            message: '请选择消息模板',
            trigger: 'change',
          },
        ],
        numbers: [
          {
            required: true,
            message: '请输入发送给...',
            trigger: 'blur',
          },
        ],
        sendTask: {
          weekValue: [
            {
              type: 'array',
              required: true,
              message: '请选择发送周期',
              trigger: 'change',
            },
          ],
          monthValue: [
            {
              required: true,
              type: 'array',
              message: '请选择发送周期',
              trigger: 'change',
            },
          ],
          startEndDate: [
            {
              required: true,
              message: '请选择日期范围',
              trigger: 'change',
            },
          ],
          time: [
            {
              required: true,
              message: '请选择发送时间',
              trigger: 'change',
            },
          ],
        },
      },
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate(valid => {
        if (valid) {
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.submit {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  text-align: center;
  ::v-deep .el-button {
    min-width: 120px;
    font-size: 16px;
  }
}
</style>
